<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
      <el-form-item label="供应商名称" prop="providerId">
        <el-select
          v-model="queryParams.providerId"
          placeholder="请选择供应商名称"
          clearable
          size="small"
          style="width:180px"
        >
          <el-option
            v-for="dict in providerOptions"
            :key="dict.providerId"
            :label="dict.providerName"
            :value="dict.providerId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请人" prop="applyUserName">
        <el-input
          v-model="queryParams.applyUserName"
          placeholder="请输入申请人"
          clearable
          size="small"
          style="width:180px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件结束 -->

    <!-- 表格工具按钮开始 -->
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini"  @click="handleAuditPass">审核通过</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini"  @click="handleAuditNoPass">审核不通过</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini"  @click="handleViewItem">查看详情</el-button>
      </el-col>
    </el-row>
    <!-- 表格工具按钮结束 -->

    <!-- 数据表格开始 -->
    <el-table v-loading="loading" border :data="purchaseTableList" @selection-change="handleSelectionChnage">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单据ID" align="center" width="200" prop="purchaseId" />
      <el-table-column label="供应商" width="180" align="center" prop="providerId" :formatter="providerFormatter" />
      <el-table-column label="采购批发总额" align="center" prop="purchaseTradeTotalAmount">
        <template slot-scope="scope">
          <span>{{ scope.row.purchaseTradeTotalAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter" />
      <el-table-column label="申请人" align="center" prop="applyUserName" />
      <el-table-column label="入库操作人" align="center" prop="storageOptUser" />
      <el-table-column label="入库时间" width="180" align="center" prop="storageOptTime" />
      <el-table-column label="审核信息" align="center" prop="auditMsg" />
      <el-table-column label="创建时间" width="180" align="center" prop="createTime" />
    </el-table>
    <!-- 数据表格结束 -->
    <!-- 分页控件开始 -->
    <el-pagination
      v-show="total>0"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handLeSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页控件结束 -->

    <!-- 单据详情的弹出层开始 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      center
      append-to-body
    >
      <el-table v-loading="loading" border :data="purchaseItemTableList">
        <el-table-column label="详情ID" width="180" align="center" prop="itemId" />
        <el-table-column label="单据ID" width="200" align="center" prop="purchaseId" />
        <el-table-column label="采购数量" align="center" prop="purchaseNumber" />
        <el-table-column label="批发价" prop="tradePrice" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tradePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="批发额" align="center" prop="tradeTotalAmount">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeTotalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="批次号" align="center" prop="batchNumber" />
        <el-table-column label="药品名称" align="center" prop="medicinesName" />
        <el-table-column label="单位" align="center" prop="conversion" />
        <el-table-column label="创建时间" align="center" prop="unit" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 单据详情的弹出层结束 -->
  </div>
</template>
<script>
// 引入api

export default {

  deactivated () {
    //解决vue组件 前进刷新，后退不刷新，
    //$destroy完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。
    this.$destroy();
  },

  // 定义页面数据
  data() {
    return {
      // 是否启用遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      examineq:[],
      // 非多个禁用
      multiple: true,
      // 是否打开查看详情
      open: false,
      // 弹出层的标题
      title: '',
      // 分页数据总条数
      total: 0,
      // 表格数据
      purchaseTableList: [],
      // 单据详情情数据
      purchaseItemTableList: [],
      // 状态数据字典
      statusOptions: [],
      // 供应商的数据
      providerOptions: [],
      // 查询参数
      queryParams: {
        providerId: undefined,
        applyUserName: undefined,
        status: undefined
      },
	  pageNum: 1,
	  pageSize: 5,
    }
  },
  // 勾子
  created() {
    // 查询表格数据
    this.initPurchaseList()
	this.initStatu()
	this.initProvider()
  },
  // 方法
  methods: {
    // 查询表格数据
    initPurchaseList() {
      // this.loading = true // 打开遮罩 
                  this.$http.post("/stock/api/examine/queStatus/"+ this.pageNum+"/"+this.pageSize, this.queryParams).then(result => {
                    this.loading = true// 开启遮罩
                    this.purchaseTableList = result.data.data.records
                    this.total = result.data.data.total
                    this.loading = false// 关闭遮罩
                  })
          },
		 
		  initStatu() {
		  	this.$http.get("stock/api/user/findByType/his_order_status").then(result => {
		  		this.statusOptions = result.data.data
		  	})
		  },

		 //下拉框供应商
		 	initProvider() {
		 		this.$http.get("stock/api/provider/getAll").then(result => {
		 			this.providerOptions = result.data.data
		 		})
		 	},
			
			//from表单显示双表关联替换数据//状态
						providerFormatter(row){
							let v=row.providerId;
								for(let i=0;i<this.providerOptions.length;i++){
										if(this.providerOptions[i].providerId==v){
											return this.providerOptions[i].providerName;
										}
									}
									return "";
						},
						
		  statusFormatter(row){
		  	let v=row.status;
		  	for(var i=0;i<this.statusOptions.length;i++){
		  						if(this.statusOptions[i].dictValue===v){
		  							return this.statusOptions[i].dictLabel;
		  						}
		  					}
		  					return "";
		  				},

						// 审核通过
						handleAuditPass(row) {
						  const  tx=this
						  tx.$confirm('是否确认审核通过此单据的数据?', '提示', {
						    confirmButtonText: '确定',
						    cancelButtonText: '取消',
						    type: 'warning'
						  }).then(() => {
						    this.$http.post("stock/api/examine/addexam/",this.examineq[0]).then(res => {
						      if (res.data.data){
                                tx.$message.success('审核通过成功')
                                tx.handleQuery()// 全查询
                              }

						    }).catch(() => {
						      tx.$message('审核通过失败')
						    })
						  }).catch(() => {
						    tx.$message('审核通过已取消')
						  })
						},
						
						// 审核不通过
						handleAuditNoPass(row) {
                          const  tx=this
                          tx.$confirm('是否确认审核不通过此单据的数据?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                          }).then(() => {
                            this.$http.post("stock/api/examine/noexamine/",this.examineq[0]).then(res => {
                              if (res.data.data){
                                tx.$message.success('审核成功')
                                tx.handleQuery()// 全查询
                              }

                            }).catch(() => {
                              tx.$message('审核失败')
                            })
                          }).catch(() => {
                            tx.$message('审核已取消')
                          })
                        },
						
						// 重置查询条件
						    resetQuery() {
                              this.queryParams={}
						      this.pageNum=1
						      this.initPurchaseList()
						    },

					// 分页pageSize变化时触发
					    handLeSizeChange(val) {
					      this.pageSize = val	
					      // 重新查询
					      this.initPurchaseList()
					    },
					    // 点击上一页  下一页，跳转到哪一页面时触发
						handleCurrentChange(val) {
					  this.pageNum = val
					  // 重新查询
					  this.initPurchaseList()
					},
					// 数据表格的多选择框选择时触发
					handleSelectionChnage(val) {
                      this.examineq=val

                    },
					
					// 条件查询
					handleQuery() {
					  this.pageNum=1
					  this.initPurchaseList()
					},

    // 查看详情//------------------------------未实现
    handleViewItem() {
      this.open = true
      const purchaseId = this.examineq[0].purchaseId
      console.log(purchaseId)
      this.title = '单据编号为【' + purchaseId + '】的采购详情数据'
      this.$http.post("stock/api/examine/quet/"+purchaseId+"/").then(res => {
        this.purchaseItemTableList = res.data.data
      })
    },

    //取消
    cancel() {
      this.open = false
    }
		 
   }
}
</script>
